<template>
	<div class="box">
		<p>{{ props.attrs.title }}</p>
		<div class="pie"></div>
	</div>
</template>

<script setup lang="ts">
import { reactive, getCurrentInstance, onMounted, ref } from "vue";
import type { EChartsOption, EChartsType } from "echarts";
import type { IChartsProps } from "@/typings/charts";

interface IProps {
	title: string;
	data: {
		value: number;
		name: string;
	}[];
}

const props = defineProps<IChartsProps<Object>>() as IChartsProps<IProps>;
const that = getCurrentInstance();
const pieDom = ref<HTMLElement>();
const pieChart = ref<EChartsType>();
const pieOption = reactive<EChartsOption>({
	tooltip: {
		trigger: "item",
	},
	legend: {
		top: "center",
		left: 10,
		orient: "vertical",
	},
	series: [
		{
			name: "场景分析",
			type: "pie",
			radius: ["40%", "70%"],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 10,
				borderColor: "#fff",
				borderWidth: 2,
			},
			label: {
				show: true,
				position: "inside",
				formatter: "{c}",
				color: "#fff",
			},
			emphasis: {
				label: {
					show: true,
					fontWeight: "bold",
					fontSize: 14,
				},
			},
			labelLine: {
				show: false,
			},
			data: props.attrs.data,
		},
	],
});

onMounted(() => {
	pieDom.value = document.getElementsByClassName("pie")[0] as HTMLElement;
	pieChart.value = that?.proxy?.$echarts.init(pieDom.value);
	pieChart.value?.setOption(pieOption);
});
</script>

<style scoped lang="scss">
@import url(./index.scss);
</style>
